<!-- 部门资产在线率top10 -->
<template>
	<div class="wrap">
		<span class="title"> 域名解析排名top10</span>
		<div ref="barchart" id="chart1" :style="{ height: height, width: width }"></div>
	</div>
</template>

<script>
import { connrequest2 } from "@/api/firstPage";
import { getNowDay } from "@/utils/index.js";
export default {
	data() {
		return {
			width: "100%",
			height: "350px",
			dataList: [],
			listTime: [{ 'StartTime': '', 'EndTime': '' }],
			prevenData: {}
		};
	},
	props: {
		title: {
			type: String,
			default: '显示日统计趋势'
		}
	},
	watch: {
		chartData: {
			deep: true,
			handler(val) {
				this.setOptions(val)
			}
		}
	},
	//生命周期 - 创建完成（访问当前this实例）
	created() { },
	//生命周期 - 挂载完成（访问DOM元素）
	mounted() {
		this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
		this.getData()
	},
	methods: {
		getTimeList(i) {
			// 获取当前日期
			var today = new Date();
			this.listTime[0].StartTime = formatDate(today, i, true)
			this.listTime[0].EndTime = formatDate(today, 0, false)
			function formatDate(date, daysToAdd, isStart) {
				var newDate = new Date(date);
				newDate.setDate(date.getDate() - daysToAdd);

				var year = newDate.getFullYear();
				var month = String(newDate.getMonth() + 1).padStart(2, '0');
				var day = String(newDate.getDate()).padStart(2, '0');
				var hours = isStart ? '00' : '23';
				var minutes = isStart ? '00' : '59';
				var seconds = isStart ? '00' : '59';

				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			}
		},
		async getData() {
			const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 10
        },
      }
			const res = await connrequest2('GetDNSOverView', data);
			res.Data = res.Data || []
			if (res.Data.length) {
				this.$nextTick(() => {
					let xAxis = []
					let series = []
					res.Data.map((item) => {
						xAxis.push(item.DNSName)
						series.push((item.LoadCnt))
						return item;
					});
					this.dataList = { xAxis, series }
					this.setOptions(this.dataList)
				})
			}
			else {
				this.$nextTick(() => {
					const dom = document.getElementById('chart1');
					dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
					dom.removeAttribute('_echarts_instance_');
				})
			}
		},
		setOptions(chartData) {
			let colorList = [
				'#63ace5',
				'#f9dc5c',
				'#b8e994',
				'#ff7272',
				'#ffa931',
				'#85a392',
				'#9174d7',
				'#f78fb3',
				'#cc8e35',
				'#f19066'
			];
			let seriesData = chartData.series.map((item, index) => {
				return {
					value: item,
					itemStyle: {
						color: colorList[index]
					}
				};
			});
			this.myChart.setOption({
				xAxis: {
					type: 'value',
					show: false  // 设置横坐标标签不显示
				},
				yAxis: {
					type: 'category',
					inverse: true,//倒叙
					data: chartData.xAxis,
					triggerEvent: true,
					axisLabel: {
						show: true,
						formatter: function (value) {
							var texts = value;
							if (texts.length > 7) { // 具体多少字就看自己了
								texts = texts.substr(0, 7) + '...';
							}
							return texts;
						}
					}
				},
				tooltip: {
					trigger: "item",
					// color:'red',
					textStyle: {
						color: '#000'
					},
					backgroundColor: '#fff',
					formatter: function name(params) {
						return params.name + '<br/>'
					}
				},
				series: [
					{
						data: seriesData,
						type: 'bar',
						barWidth: 25,
						itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									textStyle: { //数值样式
										color: '#5f91a8',
										fontSize: 12
									},
									formatter: (params) => {
										return params.value;
									}
								}
							}
						}
					}
				],
				grid: {
					left: 100,// 调整这个属性
					right: 60,
					top: 15,//拉伸距离顶部高度
					bottom: 30//拉伸距离底部高度
				},
				color: colorList
			})
			this.extension(this.myChart)
			// this.myChart.on('mouseover',function(e){
			// 		const component = e.componentType;
			// 		const value = e.value;
			// 		const offsetX = e.event.offsetX;
			// 		const offsetY = e.event.offsetY;
			// 		if(component === 'yAxis'){
			// 			$('#chart1').find('.echarts_tip').remove();
			// 			$('#chart1').append(`
			// 				<div class="echarts_tip" style="top:${offsetY}px;left:${offsetX}px;">
			// 					${value}
			// 				</div>
			// 			`)
			// 		}   
			// })
			this.myChart.off('click');
			this.myChart.on('mouseout', function (e) {
				const component = e.componentType;
				// if(component === 'yAxis'){
				// 	$('#chart1').find('.echarts_tip').remove();
				// }
			})
		},
		extension(chart) {
			// 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis
			// 判断是否创建过div框,如果创建过就不再创建了
			// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
			var elementDiv = document.getElementById('extension')
			if (!elementDiv) {
				var div = document.createElement('div')
				div.setAttribute('id', 'extension')
				div.style.display = 'block'
				document.querySelector('html').appendChild(div)
			}
			chart.on('mouseover', function (params) {
				if (params.componentType == 'yAxis') {
					var elementDiv = document.querySelector('#extension')
					//设置悬浮文本的位置以及样式
					var elementStyle =
						'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
					elementDiv.style.cssText = elementStyle
					elementDiv.innerHTML = params.value
					document.querySelector('html').onmousemove = function (event) {
						var elementDiv = document.querySelector('#extension')
						var xx = event.pageX - 10
						var yy = event.pageY + 15
						elementDiv.style.top = yy + 'px'
						elementDiv.style.left = xx + 'px'
					}
				}
			})
			chart.on('mouseout', function (params) {
				//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
				if (params.componentType == 'yAxis') {
					var elementDiv = document.querySelector('#extension')

					elementDiv.style.cssText = 'display:none'
				}
			})
		},
	}
};
</script>
<style scoped>
.echarts_tip {
	position: absolute;
	border-radius: 5px;
	background: rgba(0, 0, 0, .5);
	color: #FFF;
	padding: 10px 20px;
}

.wrap {
	overflow: hidden;
}
</style>